<template>
    <div class="index" ref="index">
        <div class="bg">
            <div class="bar">
                <van-button type="info" color="#0f57d5" size="large" @click="login">登录</van-button>
                <van-button type="info" size="large" style="background-color: rgba(255, 255, 255, .4); border: none"
                            @click="register">注册
                </van-button>
            </div>
            <div class="user-agreement">
                <van-checkbox v-model="checked" icon-size="0.5rem"></van-checkbox>
                <span class="txt">
                    我已同意并阅读《
                    <span style="text-decoration: underline">用户协议</span>
                    》和《
                    <span style="text-decoration: underline">隐私政策</span>
                    》
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
          return {
              checked: true
          }
        },
        methods: {
            login() {
                this.$router.push({
                    path: '/login',
                    name: 'login'
                })
            },
            register() {
                this.$router.push({
                    path: '/register',
                    name: 'register'
                })
            }
        },
        mounted() {
            this.$refs.index.style.height = window.innerHeight + "px";
        }
    };
</script>

<style lang="scss" scoped>
    .index {
        width: 100%;
        /*height: 100%;*/
        background-image: url("../../assets/images/xnjd-bg.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .bg {
            height: 100%;
            position: relative;

            .bar {
                box-sizing: border-box;
                padding: 20px 40px;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 60px;
            }
            .user-agreement {
                width: 100%;
                height: 32px;
                line-height: 32px;
                text-align: center;
                font-size: 12px;
                color: white;
                position: absolute;
                bottom: 12px;
            }
        }
    }
</style>
<style>
    .van-button--large {
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .van-checkbox {
        transform: translateY(25%);
        display: inline-block;
    }
</style>